<!--
 * @Author: Wang WeiHao
 * @Date: 2024-01-11 17:58:03
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-05-07 11:22:24
 * @Description: 
 * @FilePath: \hmcs_map\src\views\spone\frontPage\zhi\zhi.vue
-->
<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="'滞-延缓流量峰值,错峰排水'"
      :secondTitles="['城市覆盖率', '建设面积', '下垫面情况统计']"
      :slotWidth="[36, 36, 28]"
    >
      <template #left>
        <div class="w-100 h-100">
          <zhi1 :echartsData="echartsData1" v-if="echartsData1"></zhi1>
        </div>
      </template>
      <template #middle>
        <zhi2 :echartsData="echartsData2" v-if="echartsData2"></zhi2>
      </template>
      <template #right>
        <div class="w-100 h-100">
          <zhi3 :echartsData="echartsData3" :selectValue="right_value"></zhi3>
        </div>
      </template>
      <template #right_control>
        <proSelect
          :optionsData="useOptions().paishuiList"
          :defaultSelectValue="0"
          v-model:select-value="right_value"
          :width="150"
        >
        </proSelect>
      </template>
    </containTemplete>
  </div>
</template>

<script setup lang="ts">
import { useOptions } from "@/hook/useOptions";
import containTemplete from "@/components/project/containTemplete.vue";
import zhi1 from "./zhi1.vue";
import zhi2 from "./zhi2.vue";
import zhi3 from "./zhi3.vue";
const right_value = ref();
const echartsData1 = ref();
const echartsData2 = ref();
const echartsData3 = ref();
const jsonData: any = inject("jsonData");
watch(
  () => jsonData.value,
  (newValue: any, oldValue) => {
    if (newValue) {
      echartsData1.value = newValue.jsc.csfgl1;
      echartsData2.value = newValue.jsc.jsmj1;
      echartsData3.value = newValue.jsc.xdm;
    }
  }
);
</script>

<style scoped lang="less">
.bk {
  background: url("../../../../assets/image/underGround/szy_bk.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 60px 0 40px 0;
  text-align: center;
}
.textbk {
  width: 60%;
  height: 100%;
  padding: 25px 0 40px 30px;
  background: url("../../../../assets/image/underGround/text_bk.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin-top: 20px;
}
</style>
